import React from 'react'
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button ,Radio,Modal,Message} from 'antd';
import api from '../../../api/menu';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;



import PanelBox from '../../../components/PanelBox';
import Antdicons from '../Antdicon';

import './index.less'

class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    isOpenCreateUser: false,
    selectedIcon:"",
  };
  
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(values.id){
          this.updateMenu(values);
        }else{
          this.addMenu(values);
        }
       
      }
    });
  }
  updateMenu= (values) =>{
   
    api.put('/updateMenu', {...values}).then((data) => {
      const result= data.data;
     if(result.code == 0){
      Message.success('修改成功！');
      const { upconfirmBut } = this.props;
      upconfirmBut();
     }else{
      Message.error(result.message);
     }
    });
  }
  addMenu= (values) =>{
    
    api.post('/addMenu', {...values}).then((data) => {
      const result= data.data;
     if(result.code == 0){
      Message.success('添加成功！');
      const { addconfirmBut } = this.props;
      addconfirmBut();
     }else{
      Message.error(result.message);
     }
    });
  }

  startCreateUser = () =>{
    this.setState({
      isOpenCreateUser: true,
    });
  }
  closeCreateBox = () =>{
    this.setState({
      isOpenCreateUser: false,
    });
  }
  // 接收子组件传入的数据及其方法
  choiceIcon = (params) => {
    this.setState({
      selectedIcon:params.name
    })
  }
  componentDidMount = () =>{
    const record = this.props.rowRecord;
  }
  // 清空图标默认选择
  clearIcon = () => {
    this.setState({
      selectedIcon:undefined
    });
  }
  render() {
    const { getFieldDecorator,resetFields } = this.props.form;
    const record = this.props.rowRecord;
    const {callbackParent } = this.props;
    
    callbackParent({
      resetFields:resetFields,
      clearIcon:this.clearIcon
    });

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 14,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    const { close } = this.props;
    return (
      <div>
      <Form onSubmit={this.handleSubmit}>
       
          {getFieldDecorator('id', {
            initialValue:record ? record.id : ''
          })(
            <Input  type="hidden" />
          )}
        
          {getFieldDecorator('parentIds', {
            initialValue:record ? record.parentIds : '0,1'
          })(
            <Input  type="hidden" />
          )}
        
          {getFieldDecorator('parentId', {
            initialValue:record ? record.parentId : '1'
          })(
            <Input  type="hidden" />
          )}
        
        <FormItem
          {...formItemLayout}
          label="上级菜单"
        >
            {getFieldDecorator('parentName', {
                initialValue: record.parentName? record.parentName : '最高系统菜单'
              })(
              <Input  disabled />
           )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="名称"
          hasFeedback
        >
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '名称不能为空!' }],
            initialValue:record ? record.name : ''
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label= "链接"
          hasFeedback
        >
          {getFieldDecorator('href', {
            initialValue:record ? record.href : ''
          })(
            <Input placeholder="点击菜单跳转的页面"/>
          )}
        </FormItem>
       
        <FormItem
          {...formItemLayout}
          label="图标"
        >
          {getFieldDecorator('icon', {
            initialValue:this.state.selectedIcon?this.state.selectedIcon:record.icon
            })(<div>
              <Icon type={this.state.selectedIcon?this.state.selectedIcon:record.icon} style={{ fontSize:20,marginRight:10}} />         
              <a href="javascript:void(0)" onClick={this.startCreateUser} >选择图标</a>
            </div>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="排序"
        >
          {getFieldDecorator('sort', {
            initialValue:record ? record.sort : ''
          })(
            <Input placeholder ="如不填排序号，则自动排到该等级末尾！"/>
          )}
        </FormItem>
       
        {
        <FormItem
          {...formItemLayout}
          label="可见"
          extra="该菜单或操作是否显示到系统菜单中"
        >
          {getFieldDecorator('isShow',{
            initialValue:record ? record.isShow : '1'
          })(
            <RadioGroup>
              <Radio value="1" >显示</Radio>
              <Radio value="0">隐藏</Radio>
            </RadioGroup>
          )}
        </FormItem>}
        <FormItem
          {...formItemLayout}
          label="权限标识:"
        >
          {getFieldDecorator('permission', {
            initialValue:record ? record.permission : ''
          })(
            <Input placeholder='控制器中定义的权限标识，如：@RequiresPermissions("权限标识")' />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="备注:"
        >
          {getFieldDecorator('remarks', {
            initialValue:record ? record.remarks : ''
          })(
            <TextArea rows={4} />
          )}
        </FormItem>
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" size="large" style={{marginRight:'10px'}}>提交</Button>
          <Button onClick={close}>取消</Button>
          
        </FormItem>
      </Form>
      <Modal
        title="选择图标"
        visible={this.state.isOpenCreateUser}
        onOk={this.finishCreateUser}
        onCancel={this.closeCreateBox}
        wrapClassName="vertical-center-modal"
        width="800"
        footer={null}
        >
        <Antdicons close={this.closeCreateBox} choiceIcon={this.choiceIcon}/>
       </Modal>
       </div>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default WrappedRegistrationForm
